<template>
	<div class="login-wrapper" :style="'background-image:url('+loginWrapperBakImg+')'">
		<div class="login-mengban">
			<div class="login-logo">
				<img class="login-logo-img" src="../assets/logo.png" alt="">
			</div>
			<div class="login-form">
				<input type="text" v-model="username" class="login-username">
				<input type="password" @keydown.enter="loginSubmit()" v-model="password" class="login-password">
				<div @click="loginSubmit()" class="login-loginbtn">登陆</div>
	
				<div class="login-else-wrapper">
					<router-link :to="{ name: 'comingsoon'}">忘记密码</router-link>
					<router-link :to="{ name: 'comingsoon'}">注册账号</router-link>
					<!--<span>忘记密码</span>-->
					<!--<span>注册账号</span>-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';
export default {
	components: {},
	data() {
		return {
			username: '',
			password: '',
			loginWrapperBakImg: require('../assets/loginbakimg1.jpg')
		}
	},
	methods: {
		...mapActions(['save', 'read']),
		myAlert(title, content, callback) {
			let self = this;
			this.$vux.alert.show({
				title: title,
				content: content,
				onHide() {
					//              对话框隐藏后的时间
					if (callback) {
						callback();
					}
				}
			});
		},
		loginSubmit() {
			var self = this;
			new Promise(function (resolve, reject) {
				if (self.username.length == 0 || self.password.length == 0) {
					reject({title:'登陆错误', content:'请输入用户名或密码！'});
				}
				let user = {
					username: self.username,
					password: self.password
				};
				if(self.username != 'admin' || self.password != '123456'){
					let content = '用户名或者密码错误！';
					reject({title:'',content:content});
				}else{
					resolve(user);
				}
				// self.$http.get('http://wihcy.iok.la:33571/hlb/finduse.do', { params: user }).then(function (res) {
				// 	// 弹窗
				// 	let content = '';
				// 	console.log(res);
				// 	if (res.data.status == 1) {

				// 		var data = {};
				// 		data = Object.assign({},res.data.data);
				// 		data.username = data.nickname;
				// 		data.password = data.pwd;
				// 		self.save(data);
				// 		self.$router.push({ name: 'search' });
				// 		resolve(data);
				// 	} else {
				// 		content = '用户名或者密码错误！';
				// 		self.myAlert('', content);
				// 		reject(content);
				// 	}

				// }).catch(function (error) {
				// 	if (error.length < 20) {
				// 		self.myAlert('登陆错误', error);
				// 	}
				// 	else {
				// 		self.myAlert('登陆错误', '网络错误');
				// 	}
				// 	reject(error);
				// });
			}).then(function(user){
				console.log(user);
				self.save(user);
				self.$router.push({ name: 'search' ,params:{kdno:false}});
			}).catch(function(err){
				self.myAlert(err.title,err.content);
			});
		},

	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {
		var self = this;
		console.log(self.userInfo)
		if (self.userInfo.username.length > 0) {
			self.username = self.userInfo.username;
			self.password = self.userInfo.password;
			self.loginSubmit();
		}
	}
}
</script>

<style scoped>
.login-wrapper {
	/*background-image: url('../assets/loginbakimg1.jpg');*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100vh;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

.login-mengban {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
	display: flex;
	flex-direction: column;
}

.login-logo,
.login-form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 50%;
}

.login-logo-img {
	width: 3rem;
	height: 3rem;
}

.login-form {
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
}

.login-username {
	width: 80%;
	height: 1.3rem;
	display: block;
	border: 0;
	border-radius: .1rem .1rem 0 0;
	border-bottom: 1px solid #ccc;
	background-image: url("../assets/username.png");
	background-size: .6rem .6rem;
	background-repeat: no-repeat;
	background-position: .2rem center;

	padding: 0 .2rem 0 1rem;
}

.login-password {
	width: 80%;
	height: 1.3rem;
	display: block;
	border: 0;
	border-radius: 0 0 .1rem .1rem;
	background-image: url("../assets/password.png");
	background-size: .6rem .6rem;
	background-repeat: no-repeat;
	background-position: .2rem center;
	padding: 0 .2rem 0 1rem;
}

.login-loginbtn {
	width: 80%;
	height: 1.3rem;
	display: flex;
	border: 0;
	border-radius: .1rem;
	background-color: #F46518;
	color: #fff;
	margin-top: 5%;
	justify-content: center;
	align-items: center;
}

.login-else-wrapper {

	width: 80%;
	height: 1rem;
	display: flex;
	justify-content: space-between;
	color: white;
	margin-top: 10%;
}

.login-else-wrapper>a {
	color: white;
}
</style>
